import { Col, Form, InputNumber, Row } from 'antd';
import React, { useState } from 'react';
import rulenumberRanageCls from './styles.less';
import cls from 'classnames';
import { RegularExpression } from '@/common/constVariable';
interface RuleNumberRangeAPI {
  formname: string;
  placeholder: string;
  label: string;
}

export const RuleNumberRange = ({ formname, placeholder, label }: RuleNumberRangeAPI) => {
  /**
   * 保存输入数值范围
   */
  const [numberRangeInfo, setNumberRangeInfo] = useState<Record<string, any>>({
    min: null,
    max: null,
  });
  return (
    <div style={{ display: 'flex' }}>
      <div style={{ flex: 'auto' }}>
        <Row className={rulenumberRanageCls['searchForm-numberRanage']}>
          <Col span={15} className={'searchForm-numberRanage-leftNumber'}>
            <Form.Item
              name={formname + 'Min'}
              label={label}
              rules={[
                {
                  required: true,
                  message: '请填写预算费用最小值',
                },
                {
                  pattern: RegularExpression.floatNumber,
                  message: '请输入格式不正确！',
                },
              ]}
            >
              <InputNumber
                placeholder={`${placeholder}小`}
                controls={false}
                onChange={(value: string | null) => {
                  setNumberRangeInfo({
                    ...numberRangeInfo,
                    min: value,
                  });
                }}
                max={numberRangeInfo?.max}
                stringMode={true}
              />
            </Form.Item>
          </Col>
          <Col
            span={2}
            className={'searchForm-numberRanage-centerNumber'}
            style={
              {
                // borderTop: '1px solid red',
                // borderBottom: '1px solid red'
              }
            }
          >
            ~
          </Col>
          <Col span={7} className={'searchForm-numberRanage-rightNumber'}>
            <Form.Item
              name={formname + 'Max'}
              label={''}
              rules={[
                {
                  required: true,
                  message: '请填写预算费用最大值',
                },
                {
                  pattern: RegularExpression.floatNumber,
                  message: '请输入格式不正确！',
                },
              ]}
            >
              <InputNumber
                placeholder={`${placeholder}大`}
                controls={false}
                onChange={(value: string | null) => {
                  setNumberRangeInfo({
                    ...numberRangeInfo,
                    min: value,
                  });
                }}
                min={numberRangeInfo?.min}
                stringMode={true}
              />
            </Form.Item>
          </Col>
        </Row>
      </div>
    </div>
  );
};
